import React from 'react'
import { View, Image } from 'react-native'
import { Lt, Cimage, Images, Label, Jpp, Jx, Color } from "../_utils"
import { Carousel } from '../_teaset';

// 商品详情页的轮播图
export class GoodsBanner extends React.PureComponent{
    constructor(props){
        super(props);
        this.state = {
            carouselIdx:0,
        };
    }
    render(){
        const { images } = this.props;
        const {  carouselIdx } = this.state;

        return <View style={{justifyContent:"flex-end", width:Jpp.width, height:Jpp.width}}>
            <Carousel
                style = {{position:"absolute", width:Jpp.width, height:Jpp.width}}
                control = {true}
                showsHorizontalScrollIndicator = {false}
                onChange = {carouselIdx=>this.setState({carouselIdx})}
            >
            {
                images.map((v,i)=>{
                    return <Cimage uri={v} key={i} style={{width:Jpp.width, height:Jpp.width}}/>
                })
            }
            </Carousel>
            <View style={{padding:Lt.pad, alignSelf:"flex-end", right:20, bottom:20, backgroundColor:"rgba(0,0,0,0.5)",borderRadius:20}}>
                <Label style={{fontSize:Lt.c16, color:"white"}}>{carouselIdx + 1}/{images.length}</Label>
            </View>
        </View>
    }
}